<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>

<body>
    <div id="app">
        <p>生命周期钩子函数：vue实例的各个阶段，对应一个函数，到了这个阶段就会自动执行响应的函数</p>
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
        <button v-for="item in list" :key="item">{{item}}</button>
    </div>
    <script src="../0511/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '',
                list: []
            },
            beforeCreate() {
                // 实例创建前，内容没有准备就绪，不能调用函数和data
                console.log('1-beforeCreate');
            },
            created() {
                // 最常用的钩子 在这里可以发请求
                console.log('2-created');
                this.show()
                console.log(this.msg);
                console.log(this.$el);
                this.getData()
            },
            beforeMount(){
                // 页面准备渲染
                console.log(this.msg);
                console.log('3-beforeMount');
                console.log(this.$el);
            },
            mounted() {
                // 页面渲染完成，$el已经和页面绑定
                console.log('4-mounted');
                console.log(this.$el);
            },
            beforeUpdate() {
                // 数据的变化，导致这两个钩子函数的执行，函数又更新了页面，完成
                console.log('5-beforeUpdate');
                console.log(this.msg);
            },
            updated() {
                console.log('6-updated');
                console.log(this.msg);
            },
            beforeDestroy() {
                // 实例销毁之前，GC（Garbage Collection：垃圾回收机制），自己创建的全局变量、事件监听、定时器等，
                // vue创建的会自动清除。
                console.log('7-beforeDestroy');
            },
            destroyed() {
                console.log('8-destroyed');
            },
            methods: {
                show() {
                    console.log('我是一名保安，喜欢业主小丹；吃着小熊饼干，守卫一方平安。');
                },
                getData() {
                    // 发请求，获取数据
                    this.list = [1,2,3,4]
                }
            }
        })
    </script>
</body>

</html>